import { fabric } from "fabric"
import layoutSettings from '@/config/layout';
export const json =
  '{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0},{"type":"circle","left":100,"top":100,"width":100,"height":100,"fill":"red","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}'
export const Point = fabric.util.createClass({
  initialize: function (x: number, y: number) {
    this.x = x || 0
    this.y = y || 0
  },
  toString: function () {
    return this.x + "/" + this.y
  }
})
export const ColoredPoint = fabric.util.createClass(Point, {
  initialize: function (x: number, y: number, color: string) {
    this.callSuper("initialize", x, y)
    this.color = color || "#000"
  },
  toString: function () {
    return this.callSuper("toString") + " (color: " + this.color + ")"
  }
})

const point = new Point(10, 20)
point.x // 10
point.y // 20
const result = point.toString()
console.log({ result })
const redPoint = new ColoredPoint(15, 33, "#f55")
redPoint.x // 15
redPoint.y // 33
redPoint.color // "#f55"
console.log(redPoint.toString())

export const LabeledRect = fabric.util.createClass(fabric.Rect, {
  type: "labeledRect",

  initialize: function (options: any) {
    options || (options = {})
    this.callSuper("initialize", options)
    this.set("label", options.label || "")
  },

  toObject: function () {
    return fabric.util.object.extend(this.callSuper("toObject"), {
      label: this.get("label")
    })
  },

  _render: function (ctx: any) {
    this.callSuper("_render", ctx)
    ctx.font = "20px Helvetica"
    ctx.fillStyle = "#333"
    ctx.fillText(this.label, -this.width / 2, -this.height / 2 + 20)
  }
})

export const forms = [
  {
    itemType: 'select',
    prop: 'componentType',
    span: 24,
    label: '组件类型',
    options: [
      {label:'button',value:'button'},
      {label:'input',value:'input'},
    ],
    changeSelect:(data:any)=>{console.log(data)}
  }
]
export const params = {
  componentType: '',
}
export const buttonForms = [
  {
    itemType: 'input',
    prop: 'label',
    span: 12,
    label: '按钮文本',
    rules:[{required:true,message:'不能为空'}],
    changeInput:(data:any)=>{console.log(data)}
  },
  {
    itemType: 'switch',
    prop: 'block',
    span: 12,
    label: '是否块级',
    changeSwitch: (data: any) => { console.log(data) },

  }
]
export const buttonParams = {
    attrType: "button", //按钮的 DOM 的 type 属性
    block: false, //按钮是否显示为块级
    bordered: true, //按钮是否显示 border
    circle: true, //是否是圆角按钮
    color: "", //按钮颜色
    dash: false, //是否是虚线
    disabled: false, //按钮是否禁用
    focusable: true, //按钮是否镂空
    ghost: false, //按钮是否透明
    iconPlacement: "left", //按钮图标位置
    loading: false, //是否是加载按钮
    quaternary: false, //是否是四级按钮
    round: false, //是否是圆角按钮
    size: "medium", //按钮大小
    secondary: "secondary", //是否是次要按钮
    strong: false, //按钮文字是否加粗
    tertiary: false, //是否是三级按钮
    text: false, //
    label: "按钮", // 按钮文字
    textColor: "", // 按钮文字颜色
    type: "primary", // 按钮类型
    onClick: () => {
      console.log("按钮")
    }
}


export const inputForms = [
  {
    itemType: 'select',
    prop: 'size',
    span: 24,
    label: '尺寸',
    options: [
      {value:'large',label:'大'},
      {value:'medium',label:'中'},
      {value:'small',label:'小'},
      {value:'tiny',label:'极小'},
    ],
    changeSelect:(data:any)=>{console.log(data)}
  },

]
export const inputParams = {
  size:''
}
